圖文版面2

今天要練習第二塊跟第三塊圖文版面的部分

整理幾個小重點如下方：

1.將section_melon以及section_gym設為滿版
2.兩個部分都添加一個container，做為固定欄寬1200px的區塊
3.排版方式為左文右圖，因此在container設定display: flex讓資料橫排顯示
4.使用align-items: center讓資料可以置中對齊
5.使用justify-content: space-between讓資料可以平均分配剩餘空間寬度，讓第一項和最後一項貼齊邊緣
6.將img添加aspect-ratio製作等比例縮放區塊，讓物件保持固定的寬高比例
7.可以觀察到其實排版方式與我們之前練習的主BANNER版面架構是一樣的，一半文字一半圖的方式
8.不同的地方是上方圖片是左字右圖，下方圖片是右字左圖，在這邊只需要添加row-reverse改變資料方向，就可以在不影響原本的html語意的情況下將版面做調整
9. font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
10. 按鈕的製作方式可以參照[DAY7]網頁切版入門及版面實作_按鈕效果

display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;

提供格線圖如下方所示:

可參考程式碼如下方:

HTML

<section class="section_melon">
    <div class="container">
        <div class="text">
            <h2>
                角色介紹＿1<span>胖胖西瓜小白人</span>
            </h2>
            <p>因為小白人太愛吃了，體重伴隨著年齡一起增長，來到了無法控制的地步，逐漸長成跟西瓜很像的胖胖肚子，看不下去的小白人想要開始減肥了。</p>
            <div class="btn_more">
                <a href="#">了解更多</a>
            </div>
            </div>
        <div class="pic">
            <img src="https://i.ibb.co/tK376wg/mini-melon.png" alt="mini-melon">
        </div>
    </div>
    </div>
</section>
<section class="section_gym">
    <div class="container">
        <div class="text">
            <h2>
                角色介紹＿2<span>健身壯壯小白人 </span>
            </h2>
            <p>因為小白人真的很不喜歡跑步，為了提升減肥的動力，開始報名了健身房課程，並且一周去運動六次，逐漸地變成充滿腹肌的壯壯小白人(是不是運動的太超過了)。</p>
            <div class="btn_more">
                <a href="#">了解更多</a>
            </div>
        </div>
        <div class="pic">
            <img src="https://i.ibb.co/wM7HQXK/mini-gym.png" alt="mini-gym">
        </div>
    </div>
</section>

這邊為了讓大家比較清楚看的出來差異，我將兩個圖片的css分開呈現
CSS

.section_melon, .section_gym{
    width:100%;
    margin: auto;
}
.section_melon .container{
    width:1200px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;

}
.section_melon .text, .section_gym .text{
    width: 600px;
}
.section_melon img{
    width: 100%;
    aspect-ratio: 400/400;
    vertical-align: bottom;
}
.section_melon .text h2, .section_gym .text h2{
    font-size: 32px;
    color: #464646;
    font-weight: 400;
    line-height: 1.5;
}
.section_melon  .text span, .section_gym  .text span{
    display: block;
}
.section_melon .text p, .section_gym .text p{
    font-size: 16px;
    margin-top: 20px;
    line-height: 1.5;
    font-weight:100;
}
.section_gym{
    padding-top:100px;
}
.section_gym .container{
    width:1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
}
.section_gym img{
    width: 100%;
    aspect-ratio: 400/400;
}